<template>
  <div>
    <h3 class="title">岗位详情</h3>
    <el-divider />
    <el-form :model="jobData">
      <el-form-item label="岗位名称">
        <el-input required v-model="jobData.job_name" placeholder="前端工程师" />
      </el-form-item>

      <el-form-item label="岗位薪资">
        <el-input required v-model="jobData.job_salary" placeholder="8-10K" />
      </el-form-item>

      <el-form-item label="岗位标签">
        <el-input required v-model="jobData.job_label" placeholder="HTML,JavaScript,Java" />
      </el-form-item>

      <el-form-item label="岗位要求">
        <el-input required v-model="jobData.job_requirement" type="textarea" rows="5"
          placeholder=" 1、计算机相关专业，熟悉Vue框架开发；&#10 2、熟悉至少一门服务端开发语言。" />
      </el-form-item>

      <el-form-item label="岗位描述">
        <el-input required v-model="jobData.job_description" type="textarea" rows="3"
          placeholder=" 1、参与公司移动端WEB开发；&#10 2、参与公司小程序项目开发。" />
      </el-form-item>

      <el-form-item label="公司名称">
        <el-input required v-model="jobData.company_name" placeholder="XXX科技有限公司" />
      </el-form-item>

      <el-form-item label="公司规模">
        <el-input required v-model="jobData.company_scale" placeholder="20-99人" />
      </el-form-item>

      <el-form-item label="公司位置">
        <el-input required v-model="jobData.company_location" placeholder="福州-鼓楼区" />
      </el-form-item>

      <el-form-item label="公司分类">
        <el-input required v-model="jobData.company_cat" placeholder="互联网" />
      </el-form-item>

      <el-form-item label="企业人资">
        <el-input required v-model="jobData.company_hr" placeholder="李女士-18600000000" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="fullBtn" type="primary" @click="confirm">提交</el-button>
        <el-button class="fullBtn" type="danger" @click="back">返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script setup>
import { watch, inject, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const $axios = inject('$axios')
const $root = inject('$root')
let jobData = ref({})

//获取岗位详情
const getJobDetail = () => {
  let rid = router.currentRoute.value.params.id
  if (rid) {
    $axios($root + `/recruit/${rid}/`).then(
      r => {
        if (r.data.code == 200) {
          jobData.value = r.data.data
          jobData.value.job_requirement = jobData.value.job_requirement.replace(/(\r\n)|(\n)/g, '\r')
          jobData.value.job_description = jobData.value.job_description.replace(/(\r\n)|(\n)/g, '\r')
        }
      }
    )
  }
}

//提交
const confirm = () => {
  let rid = router.currentRoute.value.params.id || null
  if (rid) {
    update(rid)
  }
  else {
    add()
  }
}

//更新
const update = (rid) => {
  $axios.post($root + `/recruit/update/${rid}/`, jobData.value)
    .then(r => {
      console.log(r)
      if (r.data.code == 200) {
        ElMessage('岗位更新成功')
        return
      }
      else{
        ElMessage('岗位更新失败')
        return
      }
    })
}

//新增
const add = () => {
  $axios.post($root+`/recruit/`,detailData.value)
  .then(r => {
      console.log(r)
      if (r.data.code == 200) {
        ElMessage('添加数据成功')
        return
      }
      else{
        ElMessage('添加数据失败')
        return
      }
    })
}

//返回
const back = () => {
  router.back()
}

watch(() => router.currentRoute.value.name, (name) => {
  if (name == "jobDetail") {
    getJobDetail()
  }
}, { immediate: true })
    
</script>
<style>
.el-form-item__content {
  display: flex;
  justify-content: center;
}
</style>
